<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/Frog_32px_1177822_easyicon.net.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/Frog_32px_1177822_easyicon.net.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/Frog_16px_1177822_easyicon.net.ico">
  <link rel="mask-icon" href="/images/Frog_32px_1177822_easyicon.net.ico" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"hxy1997.xyz","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":"valine","storage":true,"lazyload":true,"nav":null,"activeClass":"valine"},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"输入关键字","hits_empty":"没有找到与「${query}」相关搜索","hits_stats":"${hits} 条相关记录，共耗时 ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.json"};
  </script>

  <meta name="description" content="关于ES5和ES6的书也好、博客也好，都有很多了，在最近读了ES12的新功能并总结之后，何不来归纳总结一下ES7-ES11的呢，其中有一些已经成为我们日常使用的常用方案了，比如ES8的async&#x2F;await方法，即使不常用，总结一下也方便查询，不多说了，赶紧进入正题，标注重点关注的，我会牢牢记住，并使用">
<meta property="og:type" content="article">
<meta property="og:title" content="ES7-ES11新功能">
<meta property="og:url" content="https://hxy1997.xyz/2021/03/29/ES7-ES11%E6%96%B0%E5%8A%9F%E8%83%BD/index.html">
<meta property="og:site_name" content="hxy的博客">
<meta property="og:description" content="关于ES5和ES6的书也好、博客也好，都有很多了，在最近读了ES12的新功能并总结之后，何不来归纳总结一下ES7-ES11的呢，其中有一些已经成为我们日常使用的常用方案了，比如ES8的async&#x2F;await方法，即使不常用，总结一下也方便查询，不多说了，赶紧进入正题，标注重点关注的，我会牢牢记住，并使用">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-03-29T05:37:27.000Z">
<meta property="article:modified_time" content="2021-04-04T14:25:32.824Z">
<meta property="article:author" content="hxy">
<meta property="article:tag" content="javascript">
<meta property="article:tag" content="ES7">
<meta property="article:tag" content="ES8">
<meta property="article:tag" content="ES9">
<meta property="article:tag" content="ES10">
<meta property="article:tag" content="ES11">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://hxy1997.xyz/2021/03/29/ES7-ES11%E6%96%B0%E5%8A%9F%E8%83%BD/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>ES7-ES11新功能 | hxy的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="hxy的博客" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">hxy的博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">Mia san Mia!</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/huxingyi1997" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://hxy1997.xyz/2021/03/29/ES7-ES11%E6%96%B0%E5%8A%9F%E8%83%BD/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/Robben.gif">
      <meta itemprop="name" content="hxy">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="hxy的博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          ES7-ES11新功能
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-03-29 13:37:27" itemprop="dateCreated datePublished" datetime="2021-03-29T13:37:27+08:00">2021-03-29</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-04-04 22:25:32" itemprop="dateModified" datetime="2021-04-04T22:25:32+08:00">2021-04-04</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/web%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">web前端</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="热度" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">热度：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2021/03/29/ES7-ES11%E6%96%B0%E5%8A%9F%E8%83%BD/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2021/03/29/ES7-ES11%E6%96%B0%E5%8A%9F%E8%83%BD/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>关于ES5和ES6的书也好、博客也好，都有很多了，在最近读了ES12的新功能并总结之后，何不来归纳总结一下ES7-ES11的呢，其中有一些已经成为我们日常使用的常用方案了，比如ES8的async/await方法，即使不常用，总结一下也方便查询，不多说了，赶紧进入正题，标注重点关注的，我会牢牢记住，并使用</p>
<span id="more"></span>

<h2 id="1-ES7（ES2016）"><a href="#1-ES7（ES2016）" class="headerlink" title="1.ES7（ES2016）"></a>1.ES7（ES2016）</h2><p>ES2016添加了两个小的特性来说明标准化过程：</p>
<ul>
<li>数组includes()方法，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。</li>
<li>a ** b指数运算符，它与 Math.pow(a, b)相同。</li>
</ul>
<h3 id="1-1-Array-prototype-includes-重点关注"><a href="#1-1-Array-prototype-includes-重点关注" class="headerlink" title="1.1 Array.prototype.includes() 重点关注"></a>1.1 Array.prototype.includes() 重点关注</h3><p><code>includes()</code> 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 <code>true</code>，否则返回<code>false</code>。</p>
<p><code>includes</code> 函数与 <code>indexOf</code> 函数很相似，下面两个表达式是等价的：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">arr.includes(x);</span><br><span class="line">arr.indexOf(x) &gt;&#x3D; 0;</span><br></pre></td></tr></table></figure>

<p>接下来我们来判断数字中是否包含某个元素：</p>
<blockquote>
<p>在ES7之前的做法</p>
</blockquote>
<p>使用<code>indexOf()</code>验证数组中是否存在某个元素，这时需要根据返回值是否为-1来判断：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let arr &#x3D; [&#39;react&#39;, &#39;angular&#39;, &#39;vue&#39;];</span><br><span class="line"></span><br><span class="line">if (arr.indexOf(&#39;react&#39;) !&#x3D;&#x3D; -1) &#123;</span><br><span class="line">    console.log(&#39;react存在&#39;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>使用ES7的includes()</p>
</blockquote>
<p>使用includes()验证数组中是否存在某个元素，这样更加直观简单：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let arr &#x3D; [&#39;react&#39;, &#39;angular&#39;, &#39;vue&#39;];</span><br><span class="line"></span><br><span class="line">if (arr.includes(&#39;react&#39;)) &#123;</span><br><span class="line">    console.log(&#39;react存在&#39;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="1-2-指数操作符-重点关注"><a href="#1-2-指数操作符-重点关注" class="headerlink" title="1.2 指数操作符 重点关注"></a>1.2 指数操作符 重点关注</h3><p>还记得初学编程就记得Qbasic的7种运算操作符+-*/（加减乘除） \（整除）mod（区域）^（乘方）</p>
<p>但ES7以前的JS种，需要使用Math.pow()进行计算。在ES7中引入了指数运算符<code>**</code>，<code>**</code>具有与<code>Math.pow(..)</code>等效的计算结果。</p>
<blockquote>
<p>使用指数操作符</p>
</blockquote>
<p>使用指数运算符**，就像+、-等操作符一样：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">console.log(2**10); &#x2F;&#x2F; 输出1024</span><br></pre></td></tr></table></figure>

<h2 id="2-ES8（ES2017）"><a href="#2-ES8（ES2017）" class="headerlink" title="2. ES8（ES2017）"></a>2. ES8（ES2017）</h2><h3 id="2-1-async-await-重点关注"><a href="#2-1-async-await-重点关注" class="headerlink" title="2.1 async/await 重点关注"></a>2.1 async/await 重点关注</h3><p>ES2018引入异步迭代器（asynchronous iterators），这就是迭代器的语法糖，除了<code>next()</code>方法返回一个Promise。因此<code>await</code>可以和<code>for...of</code>循环一起使用，以串行的方式运行异步操作。例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">async function process(array) &#123;</span><br><span class="line">    for await (let i of array) &#123;</span><br><span class="line">    	doSomething(i);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-2-Object-values-重点关注"><a href="#2-2-Object-values-重点关注" class="headerlink" title="2.2 Object.values() 重点关注"></a>2.2 Object.values() 重点关注</h3><p><code>Object.values()</code>是一个与<code>Object.keys()</code>类似的新函数，但返回的是Object自身属性的所有值，不包括继承的值。</p>
<p>假设我们要遍历如下对象<code>obj</code>的所有值：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const obj &#x3D; &#123;a: 1, b: 2, c: 3&#125;;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>不使用Object.values() :ES7</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">const vals &#x3D; Object.keys(obj).map(key &#x3D;&gt; obj[key]);</span><br><span class="line">console.log(vals); &#x2F;&#x2F; [1, 2, 3]</span><br></pre></td></tr></table></figure>

<blockquote>
<p>使用Object.values() :ES8</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">const values &#x3D; Object.values(obj1);</span><br><span class="line">console.log(values); &#x2F;&#x2F; [1, 2, 3]</span><br></pre></td></tr></table></figure>

<p>从上述代码中可以看出<code>Object.values()</code>为我们省去了遍历key，并根据这些key获取value的步骤。</p>
<h3 id="2-3-Object-entries-重点关注"><a href="#2-3-Object-entries-重点关注" class="headerlink" title="2.3 Object.entries() 重点关注"></a>2.3 Object.entries() 重点关注</h3><p><code>Object.entries()</code>函数返回一个给定对象自身可枚举属性的键值对的数组。</p>
<p>接下来我们来遍历上文中的<code>obj</code>对象的所有属性的key和value：</p>
<blockquote>
<p>不使用Object.entries() :ES7</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Object.keys(obj).forEach(key &#x3D;&gt; &#123;</span><br><span class="line">	console.log(&#39;key:&#39; + key + &#39; value:&#39; + obj[key]);</span><br><span class="line">&#125;)</span><br><span class="line">&#x2F;&#x2F; key:a value:1</span><br><span class="line">&#x2F;&#x2F; key:b value:2</span><br><span class="line">&#x2F;&#x2F; key:c value:3</span><br></pre></td></tr></table></figure>

<blockquote>
<p>使用Object.entries() :ES8</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">for(let [key,value] of Object.entries(obj))&#123;</span><br><span class="line">	console.log(&#96;key: $&#123;key&#125; value:$&#123;value&#125;&#96;);</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; key:a value:1</span><br><span class="line">&#x2F;&#x2F; key:b value:2</span><br><span class="line">&#x2F;&#x2F; key:c value:3</span><br></pre></td></tr></table></figure>

<h3 id="2-4-String-padding"><a href="#2-4-String-padding" class="headerlink" title="2.4 String padding"></a>2.4 String padding</h3><p>在ES8中String新增了两个实例函数<code>String.prototype.padStart</code>和<code>String.prototype.padEnd</code>，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。</p>
<blockquote>
<p>String.padStart(targetLength,[padString])</p>
</blockquote>
<ul>
<li>targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。</li>
<li>padString:(可选)填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 “ “。</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">console.log(&#39;0.0&#39;.padStart(4,&#39;10&#39;)) &#x2F;&#x2F;10.0</span><br><span class="line">console.log(&#39;0.0&#39;.padStart(20)) &#x2F;&#x2F; 0.00    </span><br></pre></td></tr></table></figure>

<blockquote>
<p>String.padEnd(targetLength,padString])</p>
</blockquote>
<ul>
<li>targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。</li>
<li>padString:(可选) 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 “ “；</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">console.log(&#39;0.0&#39;.padEnd(4,&#39;0&#39;)) &#x2F;&#x2F; 0.00    </span><br><span class="line">console.log(&#39;0.0&#39;.padEnd(10,&#39;0&#39;)) &#x2F;&#x2F; 0.00000000</span><br></pre></td></tr></table></figure>

<h3 id="2-5-函数参数列表结尾允许逗号"><a href="#2-5-函数参数列表结尾允许逗号" class="headerlink" title="2.5 函数参数列表结尾允许逗号"></a>2.5 函数参数列表结尾允许逗号</h3><p>主要作用是方便使用git进行多人协作开发时修改同一个函数减少不必要的行变更。</p>
<h3 id="2-6-Object-getOwnPropertyDescriptors"><a href="#2-6-Object-getOwnPropertyDescriptors" class="headerlink" title="2.6 Object.getOwnPropertyDescriptors()"></a>2.6 Object.getOwnPropertyDescriptors()</h3><p><code>Object.getOwnPropertyDescriptors()</code>函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性，则返回空对象。</p>
<blockquote>
<p>函数原型：</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Object.getOwnPropertyDescriptors(obj)</span><br></pre></td></tr></table></figure>

<p>返回<code>obj</code>对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">const obj2 &#x3D; &#123;</span><br><span class="line">	name: &#39;Jine&#39;,</span><br><span class="line">	get age() &#123;</span><br><span class="line">		return &#39;18&#39;;</span><br><span class="line"> 	&#125;</span><br><span class="line">&#125;;</span><br><span class="line">Object.getOwnPropertyDescriptors(obj2)</span><br><span class="line">&#x2F;&#x2F; &#123;</span><br><span class="line">&#x2F;&#x2F;   age: &#123;</span><br><span class="line">&#x2F;&#x2F;     configurable: true,</span><br><span class="line">&#x2F;&#x2F;     enumerable: true,</span><br><span class="line">&#x2F;&#x2F;     get: function age()&#123;&#125;, &#x2F;&#x2F;the getter function</span><br><span class="line">&#x2F;&#x2F;     set: undefined</span><br><span class="line">&#x2F;&#x2F;   &#125;,</span><br><span class="line">&#x2F;&#x2F;   name: &#123;</span><br><span class="line">&#x2F;&#x2F;     configurable: true,</span><br><span class="line">&#x2F;&#x2F;     enumerable: true,</span><br><span class="line">&#x2F;&#x2F;		value:&quot;Jine&quot;,</span><br><span class="line">&#x2F;&#x2F;		writable:true</span><br><span class="line">&#x2F;&#x2F;   &#125;</span><br><span class="line">&#x2F;&#x2F; &#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-7-SharedArrayBuffer对象"><a href="#2-7-SharedArrayBuffer对象" class="headerlink" title="2.7 SharedArrayBuffer对象"></a>2.7 SharedArrayBuffer对象</h3><p>SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区，类似于 ArrayBuffer 对象，它们都可以用来在共享内存（shared memory）上创建视图。与 ArrayBuffer 不同的是，SharedArrayBuffer 不能被分离。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;**</span><br><span class="line"> * </span><br><span class="line"> * @param &#123;*&#125; length 所创建的数组缓冲区的大小，以字节(byte)为单位。  </span><br><span class="line"> * @returns &#123;SharedArrayBuffer&#125; 一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。</span><br><span class="line"> *&#x2F;</span><br><span class="line">new SharedArrayBuffer(length);</span><br></pre></td></tr></table></figure>

<h3 id="2-8-Atomics对象"><a href="#2-8-Atomics对象" class="headerlink" title="2.8 Atomics对象"></a>2.8 Atomics对象</h3><p>Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。</p>
<p>这些原子操作属于 Atomics 模块。与一般的全局对象不同，Atomics 不是构造函数，因此不能使用 new 操作符调用，也不能将其当作函数直接调用。Atomics 的所有属性和方法都是静态的（与 Math  对象一样）。</p>
<p>多个共享内存的线程能够同时读写同一位置上的数据。原子操作会确保正在读或写的数据的值是符合预期的，即下一个原子操作一定会在上一个原子操作结束后才会开始，其操作过程不会中断。</p>
<ul>
<li>Atomics.add()</li>
</ul>
<blockquote>
<p>将指定位置上的数组元素与给定的值相加，并返回相加前该元素的值。</p>
</blockquote>
<ul>
<li>Atomics.and()</li>
</ul>
<blockquote>
<p>将指定位置上的数组元素与给定的值相与，并返回与操作前该元素的值。</p>
</blockquote>
<ul>
<li>Atomics.compareExchange()</li>
</ul>
<blockquote>
<p>如果数组中指定的元素与给定的值相等，则将其更新为新的值，并返回该元素原先的值。</p>
</blockquote>
<ul>
<li>Atomics.exchange()</li>
</ul>
<blockquote>
<p>将数组中指定的元素更新为给定的值，并返回该元素更新前的值。</p>
</blockquote>
<ul>
<li>Atomics.load()</li>
</ul>
<blockquote>
<p>返回数组中指定元素的值。</p>
</blockquote>
<ul>
<li>Atomics.or()</li>
</ul>
<blockquote>
<p>将指定位置上的数组元素与给定的值相或，并返回或操作前该元素的值。</p>
</blockquote>
<ul>
<li>Atomics.store()</li>
</ul>
<blockquote>
<p>将数组中指定的元素设置为给定的值，并返回该值。</p>
</blockquote>
<ul>
<li>Atomics.sub()</li>
</ul>
<blockquote>
<p>将指定位置上的数组元素与给定的值相减，并返回相减前该元素的值。</p>
</blockquote>
<ul>
<li>Atomics.xor()</li>
</ul>
<blockquote>
<p>将指定位置上的数组元素与给定的值相异或，并返回异或操作前该元素的值。</p>
</blockquote>
<p>wait() 和 wake() 方法采用的是 Linux 上的 futexes 模型（fast user-space mutex，快速用户空间互斥量），可以让进程一直等待直到某个特定的条件为真，主要用于实现阻塞。</p>
<ul>
<li>Atomics.wait()</li>
</ul>
<blockquote>
<p>检测数组中某个指定位置上的值是否仍然是给定值，是则保持挂起直到被唤醒或超时。返回值为 “ok”、”not-equal” 或 “time-out”。调用时，如果当前线程不允许阻塞，则会抛出异常（大多数浏览器都不允许在主线程中调用 wait()）。</p>
</blockquote>
<ul>
<li>Atomics.wake()</li>
</ul>
<blockquote>
<p>唤醒等待队列中正在数组指定位置的元素上等待的线程。返回值为成功唤醒的线程数量。</p>
</blockquote>
<ul>
<li>Atomics.isLockFree(size)</li>
</ul>
<blockquote>
<p>可以用来检测当前系统是否支持硬件级的原子操作。对于指定大小的数组，如果当前系统支持硬件级的原子操作，则返回 true；否则就意味着对于该数组，Atomics 对象中的各原子操作都只能用锁来实现。此函数面向的是技术专家。–&gt;</p>
</blockquote>
<h2 id="3-ES9（ES2018）"><a href="#3-ES9（ES2018）" class="headerlink" title="3. ES9（ES2018）"></a>3. ES9（ES2018）</h2><h3 id="3-1-异步迭代"><a href="#3-1-异步迭代" class="headerlink" title="3.1 异步迭代"></a>3.1 异步迭代</h3><p>在<code>async/await</code>的某些时刻，你可能尝试在同步循环中调用异步函数。例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">async function process(array) &#123;</span><br><span class="line">    for (let i of array) &#123;</span><br><span class="line">    	await doSomething(i);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这段代码不会正常运行，下面这段同样也不会：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">async function process(array) &#123;</span><br><span class="line">    array.forEach(async i &#x3D;&gt; &#123;</span><br><span class="line">    	await doSomething(i);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这段代码中，循环本身依旧保持同步，并在在内部异步函数之前全部调用完成。</p>
<p>ES2018引入异步迭代器（asynchronous iterators），这就像常规迭代器，除了<code>next()</code>方法返回一个Promise。因此<code>await</code>可以和<code>for...of</code>循环一起使用，以串行的方式运行异步操作。例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">async function process(array) &#123;</span><br><span class="line">    for await (let i of array) &#123;</span><br><span class="line">    	doSomething(i);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-2-Promise-finally-重点关注"><a href="#3-2-Promise-finally-重点关注" class="headerlink" title="3.2 Promise.finally()  重点关注"></a>3.2 Promise.finally()  重点关注</h3><p>一个Promise调用链要么成功到达最后一个<code>.then()</code>，要么失败触发<code>.catch()</code>。在某些情况下，你想要在无论Promise运行成功还是失败，运行相同的代码，例如清除，删除对话，关闭数据库连接等。</p>
<p><code>.finally()</code>允许你指定最终的逻辑：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">function doSomething() &#123;</span><br><span class="line">    doSomething1()</span><br><span class="line">    .then(doSomething2)</span><br><span class="line">    .then(doSomething3)</span><br><span class="line">    .catch(err &#x3D;&gt; &#123;</span><br><span class="line">    	console.log(err);</span><br><span class="line">    &#125;)</span><br><span class="line">    .finally(() &#x3D;&gt; &#123;</span><br><span class="line">    	&#x2F;&#x2F; finish here!</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-3-Rest-Spread-属性-重点关注"><a href="#3-3-Rest-Spread-属性-重点关注" class="headerlink" title="3.3 Rest/Spread 属性 重点关注"></a>3.3 Rest/Spread 属性 重点关注</h3><p>ES6(ES2015)引入了<a href="https://link.juejin.im/?target=https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">Rest参数</a>和<a href="https://link.juejin.im/?target=https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax">扩展运算符</a>。三个点（…）仅用于数组。Rest参数语法允许我们将一个不定数量的参数表示为一个数组。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">restParam(1, 2, 3, 4, 5);</span><br><span class="line"></span><br><span class="line">function restParam(p1, p2, ...p3) &#123;</span><br><span class="line">    &#x2F;&#x2F; p1 &#x3D; 1</span><br><span class="line">    &#x2F;&#x2F; p2 &#x3D; 2</span><br><span class="line">    &#x2F;&#x2F; p3 &#x3D; [3, 4, 5]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>展开操作符以相反的方式工作，将数组转换成可传递给函数的单独参数。例如<code>Math.max()</code>返回给定数字中的最大值：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">const values &#x3D; [99, 100, -1, 48, 16];</span><br><span class="line">console.log( Math.max(...values) ); &#x2F;&#x2F; 100</span><br></pre></td></tr></table></figure>

<p>ES2018为对象解构提供了和数组一样的Rest参数（）和展开操作符，一个简单的例子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">const myObject &#x3D; &#123;</span><br><span class="line">    a: 1,</span><br><span class="line">    b: 2,</span><br><span class="line">    c: 3</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">const &#123; a, ...x &#125; &#x3D; myObject;</span><br><span class="line">&#x2F;&#x2F; a &#x3D; 1</span><br><span class="line">&#x2F;&#x2F; x &#x3D; &#123; b: 2, c: 3 &#125;</span><br></pre></td></tr></table></figure>

<p>或者你可以使用它给函数传递参数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">restParam(&#123;</span><br><span class="line">    a: 1,</span><br><span class="line">    b: 2,</span><br><span class="line">    c: 3</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">function restParam(&#123; a, ...x &#125;) &#123;</span><br><span class="line">	console.log(a, x);</span><br><span class="line">    &#x2F;&#x2F; a &#x3D; 1</span><br><span class="line">    &#x2F;&#x2F; x &#x3D; &#123; b: 2, c: 3 &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>跟数组一样，Rest参数只能在声明的结尾处使用。此外，它只适用于每个对象的顶层，如果对象中嵌套对象则无法适用。</p>
<p>扩展运算符可以在其他对象内使用，例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">const obj1 &#x3D; &#123; a: 1, b: 2, c: 3 &#125;;</span><br><span class="line">const obj2 &#x3D; &#123; ...obj1, z: 26 &#125;;</span><br><span class="line">console.log(obj2);</span><br><span class="line">&#x2F;&#x2F; obj2 is &#123; a: 1, b: 2, c: 3, z: 26 &#125;</span><br></pre></td></tr></table></figure>

<p>可以使用扩展运算符拷贝一个对象，像是这样<code>obj2 = &#123;...obj1&#125;</code>，但是 <strong>这只是一个对象的浅拷贝</strong>。另外，如果一个对象A的属性是对象B，那么在克隆后的对象cloneB中，该属性指向对象B。</p>
<h3 id="3-4-正则表达式命名捕获组"><a href="#3-4-正则表达式命名捕获组" class="headerlink" title="3.4 正则表达式命名捕获组"></a>3.4 正则表达式命名捕获组</h3><p>JavaScript正则表达式可以返回一个匹配的对象——一个包含匹配字符串的类数组，例如：以<code>YYYY-MM-DD</code>的格式解析日期：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const</span><br><span class="line">    reDate &#x3D; &#x2F;([0-9]&#123;4&#125;)-([0-9]&#123;2&#125;)-([0-9]&#123;2&#125;)&#x2F;,</span><br><span class="line">    match  &#x3D; reDate.exec(&#39;2018-04-30&#39;),</span><br><span class="line">    year   &#x3D; match[1], &#x2F;&#x2F; 2018</span><br><span class="line">    month  &#x3D; match[2], &#x2F;&#x2F; 04</span><br><span class="line">    day    &#x3D; match[3]; &#x2F;&#x2F; 30</span><br></pre></td></tr></table></figure>

<p>这样的代码很难读懂，并且改变正则表达式的结构有可能改变匹配对象的索引。</p>
<p>ES2018允许命名捕获组使用符号<code>?&lt;name&gt;</code>，在打开捕获括号<code>(</code>后立即命名，示例如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const</span><br><span class="line">    reDate &#x3D; &#x2F;(?&lt;year&gt;[0-9]&#123;4&#125;)-(?&lt;month&gt;[0-9]&#123;2&#125;)-(?&lt;day&gt;[0-9]&#123;2&#125;)&#x2F;,</span><br><span class="line">    match  &#x3D; reDate.exec(&#39;2018-04-30&#39;),</span><br><span class="line">    year   &#x3D; match.groups.year,  &#x2F;&#x2F; 2018</span><br><span class="line">    month  &#x3D; match.groups.month, &#x2F;&#x2F; 04</span><br><span class="line">    day    &#x3D; match.groups.day;   &#x2F;&#x2F; 30</span><br></pre></td></tr></table></figure>

<p>任何匹配失败的命名组都将返回<code>undefined</code>。</p>
<p>命名捕获也可以使用在<code>replace()</code>方法中。例如将日期转换为美国的 MM-DD-YYYY 格式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">const</span><br><span class="line">    reDate &#x3D; &#x2F;(?&lt;year&gt;[0-9]&#123;4&#125;)-(?&lt;month&gt;[0-9]&#123;2&#125;)-(?&lt;day&gt;[0-9]&#123;2&#125;)&#x2F;,</span><br><span class="line">    d &#x3D; &#39;2018-04-30&#39;,</span><br><span class="line">    usDate &#x3D; d.replace(reDate, &#39;$&lt;month&gt;-$&lt;day&gt;-$&lt;year&gt;&#39;);</span><br></pre></td></tr></table></figure>

<h3 id="3-5-正则表达式反向断言"><a href="#3-5-正则表达式反向断言" class="headerlink" title="3.5 正则表达式反向断言"></a>3.5 正则表达式反向断言</h3><p>目前JavaScript在正则表达式中支持先行断言（lookahead）。这意味着匹配会发生，但不会有任何捕获，并且断言没有包含在整个匹配字段中。例如从价格中捕获货币符号：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const</span><br><span class="line">    reLookahead &#x3D; &#x2F;\D(?&#x3D;\d+)&#x2F;,</span><br><span class="line">    match       &#x3D; reLookahead.exec(&#39;$123.89&#39;);</span><br><span class="line"></span><br><span class="line">console.log( match[0] ); &#x2F;&#x2F; $</span><br></pre></td></tr></table></figure>

<p>ES2018引入以相同方式工作但是匹配前面的反向断言（lookbehind），这样就可以忽略货币符号，单纯的捕获价格的数字：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const</span><br><span class="line">    reLookbehind &#x3D; &#x2F;(?&lt;&#x3D;\D)\d+&#x2F;,</span><br><span class="line">    match        &#x3D; reLookbehind.exec(&#39;$123.89&#39;);</span><br><span class="line"></span><br><span class="line">console.log( match[0] ); &#x2F;&#x2F; 123.89</span><br></pre></td></tr></table></figure>

<p>以上是 <strong>肯定反向断言</strong>，非数字<code>\D</code>必须存在。同样的，还存在 <strong>否定反向断言</strong>，表示一个值必须不存在，例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const</span><br><span class="line">  reLookbehindNeg &#x3D; &#x2F;(?&lt;!\D)\d+&#x2F;,</span><br><span class="line">  match           &#x3D; reLookbehind.exec(&#39;$123.89&#39;);</span><br><span class="line"></span><br><span class="line">console.log( match[0] ); &#x2F;&#x2F; null</span><br></pre></td></tr></table></figure>

<h3 id="3-6-正则表达式dotAll模式"><a href="#3-6-正则表达式dotAll模式" class="headerlink" title="3.6 正则表达式dotAll模式"></a>3.6 正则表达式dotAll模式</h3><p>正则表达式中点<code>.</code>匹配除回车外的任何单字符，标记<code>s</code>改变这种行为，允许行终止符的出现，例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;hello.world&#x2F;.test(&#39;hello\nworld&#39;);  &#x2F;&#x2F; false</span><br><span class="line">&#x2F;hello.world&#x2F;s.test(&#39;hello\nworld&#39;); &#x2F;&#x2F; true</span><br></pre></td></tr></table></figure>

<h3 id="3-7-正则表达式-Unicode-转义"><a href="#3-7-正则表达式-Unicode-转义" class="headerlink" title="3.7 正则表达式 Unicode 转义"></a>3.7 正则表达式 Unicode 转义</h3><p>到目前为止，在正则表达式中本地访问 Unicode 字符属性是不被允许的。ES2018添加了 Unicode 属性转义——形式为<code>\p&#123;...&#125;</code>和<code>\P&#123;...&#125;</code>，在正则表达式中使用标记 <code>u</code> (unicode) 设置，在<code>\p</code>块儿内，可以以键值对的方式设置需要匹配的属性而非具体内容。例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">const reGreekSymbol &#x3D; &#x2F;\p&#123;Script&#x3D;Greek&#125;&#x2F;u;</span><br><span class="line">reGreekSymbol.test(&#39;π&#39;); &#x2F;&#x2F; true</span><br></pre></td></tr></table></figure>

<p>此特性可以避免使用特定 Unicode 区间来进行内容类型判断，提升可读性和可维护性。</p>
<h3 id="3-8-非转义序列的模板字符串"><a href="#3-8-非转义序列的模板字符串" class="headerlink" title="3.8 非转义序列的模板字符串"></a>3.8 非转义序列的模板字符串</h3><p>之前，<code>\u</code>开始一个 unicode 转义，<code>\x</code>开始一个十六进制转义，<code>\</code>后跟一个数字开始一个八进制转义。这使得创建特定的字符串变得不可能，例如Windows文件路径 <code>C:\uuu\xxx\111</code>。更多细节参考<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings">模板字符串</a>。</p>
<h2 id="4-ES10（ES2019）"><a href="#4-ES10（ES2019）" class="headerlink" title="4.ES10（ES2019）"></a>4.ES10（ES2019）</h2><h3 id="4-1-行分隔符（U-2028）和段分隔符（U-2029）符号"><a href="#4-1-行分隔符（U-2028）和段分隔符（U-2029）符号" class="headerlink" title="4.1 行分隔符（U + 2028）和段分隔符（U + 2029）符号"></a>4.1 行分隔符（U + 2028）和段分隔符（U + 2029）符号</h3><p>行分隔符（U + 2028）和段分隔符（U + 2029）符号现在允许在字符串文字中，与JSON匹配，这些符号在字符串文字中被视为行终止符，因此使用它们会导致SyntaxError异常。</p>
<h3 id="4-2-更加友好的-JSON-stringify"><a href="#4-2-更加友好的-JSON-stringify" class="headerlink" title="4.2 更加友好的 JSON.stringify"></a>4.2 更加友好的 JSON.stringify</h3><p>如果输入 Unicode 格式但是超出范围的字符，在原先JSON.stringify返回格式错误的Unicode字符串。现在实现了一个改变JSON.stringify的<a target="_blank" rel="noopener" href="https://github.com/tc39/proposal-well-formed-stringify">第3阶段提案</a>，因此它为其输出转义序列，使其成为有效Unicode（并以UTF-8表示）</p>
<h3 id="4-3-新增了Array的flat-方法和flatMap-方法-重点关注"><a href="#4-3-新增了Array的flat-方法和flatMap-方法-重点关注" class="headerlink" title="4.3 新增了Array的flat()方法和flatMap()方法 重点关注"></a>4.3 新增了Array的<code>flat()</code>方法和<code>flatMap()</code>方法 重点关注</h3><p><code>flat()</code>和<code>flatMap()</code>本质上就是是归纳（reduce） 与 合并（concat）的操作。</p>
<h4 id="Array-prototype-flat"><a href="#Array-prototype-flat" class="headerlink" title="Array.prototype.flat()"></a>Array.prototype.flat()</h4><p><code>flat()</code> 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。</p>
<ul>
<li><code>flat()</code>方法最基本的作用就是数组降维</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">var arr1 &#x3D; [1, 2, [3, 4]];</span><br><span class="line">arr1.flat(); </span><br><span class="line">&#x2F;&#x2F; [1, 2, 3, 4]</span><br><span class="line"></span><br><span class="line">var arr2 &#x3D; [1, 2, [3, 4, [5, 6]]];</span><br><span class="line">arr2.flat();</span><br><span class="line">&#x2F;&#x2F; [1, 2, 3, 4, [5, 6]]</span><br><span class="line"></span><br><span class="line">var arr3 &#x3D; [1, 2, [3, 4, [5, 6]]];</span><br><span class="line">arr3.flat(2);</span><br><span class="line">&#x2F;&#x2F; [1, 2, 3, 4, 5, 6]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;使用 Infinity 作为深度，展开任意深度的嵌套数组</span><br><span class="line">arr3.flat(Infinity); </span><br><span class="line">&#x2F;&#x2F; [1, 2, 3, 4, 5, 6]</span><br></pre></td></tr></table></figure>

<ul>
<li>其次，还可以利用<code>flat()</code>方法的特性来去除数组的空项</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var arr4 &#x3D; [1, 2, , 4, 5];</span><br><span class="line">arr4.flat();</span><br><span class="line">&#x2F;&#x2F; [1, 2, 4, 5]</span><br></pre></td></tr></table></figure>

<h4 id="Array-prototype-flatMap"><a href="#Array-prototype-flatMap" class="headerlink" title="Array.prototype.flatMap()"></a>Array.prototype.flatMap()</h4><p><code>flatMap()</code> 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。 这里我们拿map方法与flatMap方法做一个比较。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var arr1 &#x3D; [1, 2, 3, 4];</span><br><span class="line"></span><br><span class="line">arr1.map(x &#x3D;&gt; [x * 2]); </span><br><span class="line">&#x2F;&#x2F; [[2], [4], [6], [8]]</span><br><span class="line"></span><br><span class="line">arr1.flatMap(x &#x3D;&gt; [x * 2]);</span><br><span class="line">&#x2F;&#x2F; [2, 4, 6, 8]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 只会将 flatMap 中的函数返回的数组 “压平” 一层</span><br><span class="line">arr1.flatMap(x &#x3D;&gt; [[x * 2]]);</span><br><span class="line">&#x2F;&#x2F; [[2], [4], [6], [8]]</span><br></pre></td></tr></table></figure>

<h3 id="4-4-新增了String的trimStart-方法和trimEnd-方法"><a href="#4-4-新增了String的trimStart-方法和trimEnd-方法" class="headerlink" title="4.4 新增了String的trimStart()方法和trimEnd()方法"></a>4.4 新增了String的trimStart()方法和trimEnd()方法</h3><p>新增的这两个方法很好理解，分别去除字符串首尾空白字符，这里就不用例子说声明了。</p>
<h3 id="4-5-Object-fromEntries"><a href="#4-5-Object-fromEntries" class="headerlink" title="4.5 Object.fromEntries()"></a>4.5 Object.fromEntries()</h3><p><code>Object.entries()</code>方法的作用是返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。</p>
<p><strong>而<code>Object.fromEntries()</code> 则是 <code>Object.entries()</code> 的反转。</strong></p>
<p><code>Object.fromEntries()</code> 函数传入一个键值对的列表，并返回一个带有这些键值对的新对象。这个迭代参数应该是一个能够实现@iterator方法的的对象，返回一个迭代器对象。它生成一个具有两个元素的类似数组的对象，第一个元素是将用作属性键的值，第二个元素是与该属性键关联的值。</p>
<ul>
<li>通过 Object.fromEntries， 可以将 Map 转化为 Object:</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const map &#x3D; new Map([ [&#39;foo&#39;, &#39;bar&#39;], [&#39;baz&#39;, 42] ]);</span><br><span class="line">const obj &#x3D; Object.fromEntries(map);</span><br><span class="line">console.log(obj); &#x2F;&#x2F; &#123; foo: &quot;bar&quot;, baz: 42 &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>通过 Object.fromEntries， 可以将 Array 转化为 Object:</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const arr &#x3D; [ [&#39;0&#39;, &#39;a&#39;], [&#39;1&#39;, &#39;b&#39;], [&#39;2&#39;, &#39;c&#39;] ];</span><br><span class="line">const obj &#x3D; Object.fromEntries(arr);</span><br><span class="line">console.log(obj); &#x2F;&#x2F; &#123; 0: &quot;a&quot;, 1: &quot;b&quot;, 2: &quot;c&quot; &#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-6-Symbol-prototype-description"><a href="#4-6-Symbol-prototype-description" class="headerlink" title="4.6 Symbol.prototype.description"></a>4.6 Symbol.prototype.description</h3><p>通过工厂函数Symbol（）创建符号时，您可以选择通过参数提供字符串作为描述：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const sym &#x3D; Symbol(&#39;The description&#39;);</span><br></pre></td></tr></table></figure>

<p>以前，访问描述的唯一方法是将符号转换为字符串：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">assert.equal(String(sym), &#39;Symbol(The description)&#39;);</span><br></pre></td></tr></table></figure>

<p>现在引入了getter Symbol.prototype.description以直接访问描述：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">assert.equal(sym.description, &#39;The description&#39;);</span><br></pre></td></tr></table></figure>

<h3 id="4-7-String-prototype-matchAll"><a href="#4-7-String-prototype-matchAll" class="headerlink" title="4.7 String.prototype.matchAll"></a>4.7 String.prototype.matchAll</h3><p><code>matchAll()</code> 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。 在 matchAll 出现之前，通过在循环中调用regexp.exec来获取所有匹配项信息（regexp需使用/g标志：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">const regexp &#x3D; RegExp(&#39;foo*&#39;,&#39;g&#39;);</span><br><span class="line">const str &#x3D; &#39;table football, foosball&#39;;</span><br><span class="line"></span><br><span class="line">while ((matches &#x3D; regexp.exec(str)) !&#x3D;&#x3D; null) &#123;</span><br><span class="line">    console.log(&#96;Found $&#123;matches[0]&#125;. Next starts at $&#123;regexp.lastIndex&#125;.&#96;);</span><br><span class="line">    &#x2F;&#x2F; expected output: &quot;Found foo. Next starts at 9.&quot;</span><br><span class="line">    &#x2F;&#x2F; expected output: &quot;Found foo. Next starts at 19.&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>如果使用matchAll ，就可以不必使用while循环加exec方式（且正则表达式需使用／g标志）。使用matchAll 会得到一个迭代器的返回值，配合 for…of, array spread, or Array.from() 可以更方便实现功能：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">const regexp &#x3D; RegExp(&#39;foo*&#39;,&#39;g&#39;); </span><br><span class="line">const str &#x3D; &#39;table football, foosball&#39;;</span><br><span class="line">let matches &#x3D; str.matchAll(regexp);</span><br><span class="line"></span><br><span class="line">for (const match of matches) &#123;</span><br><span class="line">	console.log(match);</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; Array [ &quot;foo&quot; ]</span><br><span class="line">&#x2F;&#x2F; Array [ &quot;foo&quot; ]</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; matches iterator is exhausted after the for..of iteration</span><br><span class="line">&#x2F;&#x2F; Call matchAll again to create a new iterator</span><br><span class="line">matches &#x3D; str.matchAll(regexp);</span><br><span class="line"></span><br><span class="line">Array.from(matches, m &#x3D;&gt; m[0]);</span><br><span class="line">&#x2F;&#x2F; Array [ &quot;foo&quot;, &quot;foo&quot; ]</span><br></pre></td></tr></table></figure>

<h4 id="matchAll可以更好的用于分组"><a href="#matchAll可以更好的用于分组" class="headerlink" title="matchAll可以更好的用于分组"></a>matchAll可以更好的用于分组</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">var regexp &#x3D; &#x2F;t(e)(st(\d?))&#x2F;g;</span><br><span class="line">var str &#x3D; &#39;test1test2&#39;;</span><br><span class="line"></span><br><span class="line">str.match(regexp); </span><br><span class="line">&#x2F;&#x2F; Array [&#39;test1&#39;, &#39;test2&#39;]</span><br><span class="line"></span><br><span class="line">let array &#x3D; [...str.matchAll(regexp)];</span><br><span class="line"></span><br><span class="line">array[0];</span><br><span class="line">&#x2F;&#x2F; [&#39;test1&#39;, &#39;e&#39;, &#39;st1&#39;, &#39;1&#39;, index: 0, input: &#39;test1test2&#39;, length: 4]</span><br><span class="line">array[1];</span><br><span class="line">&#x2F;&#x2F; [&#39;test2&#39;, &#39;e&#39;, &#39;st2&#39;, &#39;2&#39;, index: 5, input: &#39;test1test2&#39;, length: 4]</span><br></pre></td></tr></table></figure>

<h3 id="4-8-Function-prototype-toString-现在返回精确字符，包括空格和注释-重点关注"><a href="#4-8-Function-prototype-toString-现在返回精确字符，包括空格和注释-重点关注" class="headerlink" title="4.8 Function.prototype.toString()现在返回精确字符，包括空格和注释 重点关注"></a>4.8 <code>Function.prototype.toString()</code>现在返回精确字符，包括空格和注释 重点关注</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function &#x2F;* comment *&#x2F; foo &#x2F;* another comment *&#x2F;() &#123;&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 之前不会打印注释部分</span><br><span class="line">console.log(foo.toString()); &#x2F;&#x2F; function foo()&#123;&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; ES2019 会把注释一同打印</span><br><span class="line">console.log(foo.toString()); &#x2F;&#x2F; function &#x2F;* comment *&#x2F; foo &#x2F;* another comment *&#x2F; ()&#123;&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 箭头函数</span><br><span class="line">const bar &#x2F;* comment *&#x2F; &#x3D; &#x2F;* another comment *&#x2F; () &#x3D;&gt; &#123;&#125;;</span><br><span class="line"></span><br><span class="line">console.log(bar.toString()); &#x2F;&#x2F; () &#x3D;&gt; &#123;&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-9-修改-catch-绑定-重点关注"><a href="#4-9-修改-catch-绑定-重点关注" class="headerlink" title="4.9 修改 catch 绑定 重点关注"></a>4.9 修改 <code>catch</code> 绑定 重点关注</h3><p>在 ES10 之前，我们必须通过语法为 catch 子句绑定异常变量，无论是否有必要。很多时候 catch 块是多余的。 ES10 提案使我们能够简单的把变量省略掉。</p>
<p>不算大的改动。</p>
<p>之前是</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">try &#123;&#125; catch(e) &#123;&#125;</span><br></pre></td></tr></table></figure>

<p>现在是</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">try &#123;&#125; catch &#123;&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-10-新的基本数据类型BigInt-重点关注"><a href="#4-10-新的基本数据类型BigInt-重点关注" class="headerlink" title="4.10 新的基本数据类型BigInt 重点关注"></a>4.10 新的基本数据类型<code>BigInt</code> 重点关注</h3><p>现在的基本数据类型（值类型）不止5种（ES6之后是六种）了哦！加上BigInt一共有七种基本数据类型，分别是： String、Number、Boolean、Null、Undefined、Symbol、BigInt，加上Object一共八种数据类型</p>
<h2 id="5-ES11（ES2020）"><a href="#5-ES11（ES2020）" class="headerlink" title="5.ES11（ES2020）"></a>5.ES11（ES2020）</h2><h3 id="5-1-可选链式调用-Optional-Chaining"><a href="#5-1-可选链式调用-Optional-Chaining" class="headerlink" title="5.1 可选链式调用(Optional Chaining)"></a>5.1 可选链式调用(Optional Chaining)</h3><p>大部分开发者都遇到过这个问题：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">TypeError: Cannot read property ‘x’ of undefined</span><br></pre></td></tr></table></figure>

<p>这个错误表示我们正在访问一个不属于对象的属性。</p>
<h4 id="5-1-1-访问对象的属性"><a href="#5-1-1-访问对象的属性" class="headerlink" title="5.1.1 访问对象的属性"></a>5.1.1 访问对象的属性</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">const flower &#x3D; &#123;</span><br><span class="line">    colors: &#123;</span><br><span class="line">        red: true</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">console.log(flower.colors.red) &#x2F;&#x2F; 正常运行</span><br><span class="line"></span><br><span class="line">console.log(flower.species.lily) &#x2F;&#x2F; 抛出错误：TypeError: Cannot read property &#39;lily&#39; of undefined</span><br></pre></td></tr></table></figure>

<p>在这种情况下，JavaScript 引擎会像这样抛出错误。但是某些情况下值是否存在并不重要，因为我们知道它会存在。于是，可选链式调用就派上用场了！</p>
<p>我们可以使用由一个问号和一个点组成的可选链式操作符，去表示不应该引发错误。如果没有值，应该返回 <strong>undefined</strong>。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">console.log(flower.species?.lily) &#x2F;&#x2F; 输出 undefined</span><br></pre></td></tr></table></figure>

<p>当访问数组或调用函数时，也可以使用可选链式调用。</p>
<h4 id="5-1-2-访问数组"><a href="#5-1-2-访问数组" class="headerlink" title="5.1.2 访问数组"></a>5.1.2 访问数组</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">let flowers &#x3D;  [&#39;lily&#39;, &#39;daisy&#39;, &#39;rose&#39;]</span><br><span class="line"></span><br><span class="line">console.log(flowers[1]) &#x2F;&#x2F; 输出：daisy</span><br><span class="line"></span><br><span class="line">flowers &#x3D; null</span><br><span class="line"></span><br><span class="line">console.log(flowers[1]) &#x2F;&#x2F; 抛出错误：TypeError: Cannot read property &#39;1&#39; of null</span><br><span class="line">console.log(flowers?.[1]) &#x2F;&#x2F; 输出：undefined</span><br></pre></td></tr></table></figure>

<h4 id="5-1-3-调用函数"><a href="#5-1-3-调用函数" class="headerlink" title="5.1.3 调用函数"></a>5.1.3 调用函数</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">let plantFlowers &#x3D; () &#x3D;&gt; &#123;</span><br><span class="line">  return &#39;orchids&#39;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">console.log(plantFlowers()) &#x2F;&#x2F; 输出：orchids</span><br><span class="line"></span><br><span class="line">plantFlowers &#x3D; null</span><br><span class="line"></span><br><span class="line">console.log(plantFlowers()) &#x2F;&#x2F; 抛出错误：TypeError: plantFlowers is not a function</span><br><span class="line"></span><br><span class="line">console.log(plantFlowers?.()) &#x2F;&#x2F; 输出：undefined</span><br></pre></td></tr></table></figure>

<h3 id="5-2-空值合并（Nullish-Coalescing）"><a href="#5-2-空值合并（Nullish-Coalescing）" class="headerlink" title="5.2 空值合并（Nullish Coalescing）"></a>5.2 空值合并（Nullish Coalescing）</h3><p>当我们查询某个属性时，经常会遇到，如果没有该属性就会设置一个默认的值。比如下面代码中查询玩家等级。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var level &#x3D;  user.data.level || &#39;暂无等级&#39;;</span><br></pre></td></tr></table></figure>

<p>在JS中，空字符串、0 ，当进行逻辑操作符判时，会自动转化为 false。在上面的代码里，如果玩家等级本身就是 0 级, 变量 level 就会被赋值 <code>暂无等级</code> 字符串，这是逻辑错误，有时候业务上，我们只需容错取值查询到<code>undefined</code> 或者 <code>null</code> ，比如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; &#123;</span><br><span class="line">&#x2F;&#x2F;    &quot;level&quot;: null</span><br><span class="line">&#x2F;&#x2F; &#125;</span><br><span class="line">var level &#x3D; user.level !&#x3D;&#x3D; undefined &amp;&amp; user.level !&#x3D;&#x3D; null</span><br><span class="line">    ? user.level</span><br><span class="line">    : &#39;暂无等级&#39;;</span><br></pre></td></tr></table></figure>

<p>来看看用空值合并运算符如何处理</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; &#123;</span><br><span class="line">&#x2F;&#x2F;   &quot;level&quot;: 0   </span><br><span class="line">&#x2F;&#x2F; &#125;</span><br><span class="line">var level &#x3D; user.level ?? &#39;暂无等级&#39;; &#x2F;&#x2F; level -&gt; 0</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; &#123;</span><br><span class="line">&#x2F;&#x2F;   &quot;an_other_field&quot;: 0   </span><br><span class="line">&#x2F;&#x2F; &#125;</span><br><span class="line">var level &#x3D; user.level ?? &#39;暂无等级&#39;; &#x2F;&#x2F; level -&gt; &#39;暂无等级&#39;</span><br></pre></td></tr></table></figure>

<p>，用空值合并运算在逻辑正确的前提下，代码更加简洁。</p>
<p>空值合并运算符 与 可选链 相结合，可以很轻松处理多级查询并赋予默认值问题。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var level &#x3D; user.data?.level ?? &#39;暂无等级&#39;;</span><br></pre></td></tr></table></figure>

<h3 id="5-3-私有字段-Private-Fields"><a href="#5-3-私有字段-Private-Fields" class="headerlink" title="5.3 私有字段(Private Fields)"></a>5.3 私有字段(Private Fields)</h3><p>许多具有 <strong>classes</strong> 的编程语言允许定义类作为公共的，受保护的或私有的属性。<strong>Public</strong> 属性可以从类的外部或者子类访问，<strong>protected</strong> 属性只能被子类访问，<strong>private</strong> 属性只能被类内部访问。JavaScript 从 <strong>ES6</strong> 开始支持类语法，但直到现在才引入了私有字段。要定义私有属性，必须在其前面加上散列符号：**<code>#</code>**。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">class Flower &#123;</span><br><span class="line">  #leaf_color &#x3D; &quot;green&quot;;</span><br><span class="line">  constructor(name) &#123;</span><br><span class="line">    this.name &#x3D; name;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  get_color() &#123;</span><br><span class="line">    return this.#leaf_color;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const orchid &#x3D; new Flower(&quot;orchid&quot;);</span><br><span class="line"></span><br><span class="line">console.log(orchid.get_color()); &#x2F;&#x2F; 输出：green</span><br><span class="line">console.log(orchid.#leaf_color) &#x2F;&#x2F; 报错：SyntaxError: Private field &#39;#leaf_color&#39; must be declared in an enclosing class</span><br></pre></td></tr></table></figure>

<p>如果我们从外部访问类的私有属性，势必会报错。</p>
<h3 id="5-4-静态字段-Static-Fields"><a href="#5-4-静态字段-Static-Fields" class="headerlink" title="5.4 静态字段(Static Fields)"></a>5.4 静态字段(Static Fields)</h3><p>如果想使用类的方法，首先必须实例化一个类，如下所示：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">class Flower &#123;</span><br><span class="line">    add_leaves() &#123;</span><br><span class="line">    	console.log(&quot;Adding leaves&quot;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const rose &#x3D; new Flower();</span><br><span class="line">rose.add_leaves();</span><br><span class="line"></span><br><span class="line">Flower.add_leaves() &#x2F;&#x2F; 抛出错误：TypeError: Flower.add_leaves is not a function</span><br></pre></td></tr></table></figure>

<p>试图去访问没有实例化的 <strong>Flower</strong> 类的方法将会抛出一个错误。但由于 <strong>static</strong> 字段，类方法可以被 <strong>static</strong> 关键词声明然后从外部调用。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">class Flower &#123;</span><br><span class="line">    constructor(type) &#123;</span><br><span class="line">    	this.type &#x3D; type;</span><br><span class="line">    &#125;</span><br><span class="line">    static create_flower(type) &#123;</span><br><span class="line">    	return new Flower(type);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const rose &#x3D; Flower.create_flower(&quot;rose&quot;); &#x2F;&#x2F; 正常运行</span><br></pre></td></tr></table></figure>

<h3 id="5-5-顶级-Await-Top-Level-Await"><a href="#5-5-顶级-Await-Top-Level-Await" class="headerlink" title="5.5 顶级 Await(Top Level Await)"></a>5.5 顶级 Await(Top Level Await)</h3><p>目前，如果用 <strong>await</strong> 获取 promise 函数的结果，那使用 <strong>await</strong> 的函数必须用 <strong>async</strong> 关键字定义。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const func &#x3D; async () &#x3D;&gt; &#123;</span><br><span class="line">    const response &#x3D; await fetch(url)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>头疼的是，在全局作用域中去等待某些结果基本上是不可能的。除非使用 <strong>立即调用的函数表达式（IIFE）</strong>。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">(async () &#x3D;&gt; &#123;</span><br><span class="line">    const response &#x3D; await fetch(url)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<p>但引入了 <strong>顶级 Await</strong> 后，不需要再把代码包裹在一个 async 函数中了，如下即可：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const response &#x3D; await fetch(url)</span><br></pre></td></tr></table></figure>

<p>这个特性对于解决模块依赖或当初始源无法使用而需要备用源的时候是非常有用的。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">let Vue</span><br><span class="line">try &#123;</span><br><span class="line">    Vue &#x3D; await import(&#39;url_1_to_vue&#39;)</span><br><span class="line">&#125; catch &#123;</span><br><span class="line">    Vue &#x3D; await import(&#39;url_2_to_vue)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="5-6-Promise-allSettled-方法-重点关注"><a href="#5-6-Promise-allSettled-方法-重点关注" class="headerlink" title="5.6 Promise.allSettled 方法 重点关注"></a>5.6 Promise.allSettled 方法 重点关注</h3><p>我们都知道 <code>Promise.all</code> 具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise直接进入 <code>reject</code>  状态。</p>
<p>想象这个场景：你的页面有三个区域，分别对应三个独立的接口数据，使用 <code>Promise.all</code> 来并发三个接口，如果其中任意一个接口服务异常，状态是reject,这会导致页面中该三个区域数据全都无法渲染出来，因为任何 <code>reject</code> 都会进入catch回调, 很明显，这是无法接受的，如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">Promise.all([</span><br><span class="line">    Promise.reject(&#123;code: 500, msg: &#39;服务异常&#39;&#125;),</span><br><span class="line">    Promise.resolve(&#123; code: 200, list: []&#125;),</span><br><span class="line">    Promise.resolve(&#123;code: 200, list: []&#125;)</span><br><span class="line">])</span><br><span class="line">.then((ret) &#x3D;&gt; &#123;</span><br><span class="line">    &#x2F;&#x2F; 如果其中一个任务是 reject，则不会执行到这个回调。</span><br><span class="line">    RenderContent(ret);</span><br><span class="line">&#125;)</span><br><span class="line">.catch((error) &#x3D;&gt; &#123;</span><br><span class="line">    &#x2F;&#x2F; 本例中会执行到这个回调</span><br><span class="line">    &#x2F;&#x2F; error: &#123;code: 500, msg: &quot;服务异常&quot;&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>我们需要一种机制，如果并发任务中，无论一个任务正常或者异常，都会返回对应的的状态（fulfilled 或者 rejected）与结果（业务value 或者 拒因 reason），在 then 里面通过 filter 来过滤出想要的业务逻辑结果，这就能最大限度的保障业务当前状态的可访问性，而 <code>Promise.allSettled</code> 就是解决这问题的。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">Promise.allSettled([</span><br><span class="line">    Promise.reject(&#123;code: 500, msg: &#39;服务异常&#39;&#125;),</span><br><span class="line">    Promise.resolve(&#123; code: 200, list: []&#125;),</span><br><span class="line">    Promise.resolve(&#123;code: 200, list: []&#125;)</span><br><span class="line">])</span><br><span class="line">.then((ret) &#x3D;&gt; &#123;</span><br><span class="line">    &#x2F;*</span><br><span class="line">        0: &#123;status: &quot;rejected&quot;, reason: &#123;…&#125;&#125;</span><br><span class="line">        1: &#123;status: &quot;fulfilled&quot;, value: &#123;…&#125;&#125;</span><br><span class="line">        2: &#123;status: &quot;fulfilled&quot;, value: &#123;…&#125;&#125;</span><br><span class="line">    *&#x2F;</span><br><span class="line">    &#x2F;&#x2F; 过滤掉 rejected 状态，尽可能多的保证页面区域数据渲染</span><br><span class="line">    RenderContent(ret.filter((el) &#x3D;&gt; &#123;</span><br><span class="line">        return el.status !&#x3D;&#x3D; &#39;rejected&#39;;</span><br><span class="line">    &#125;));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="5-7-按需导入-Dynamic-Import"><a href="#5-7-按需导入-Dynamic-Import" class="headerlink" title="5.7 按需导入 (Dynamic Import)"></a>5.7 按需导入 (Dynamic Import)</h3><p>按需 import 提案几年前就已提出，如今终于能进入ES正式规范。这里个人理解成“按需”更为贴切。现代前端打包资源越来越大，打包成几M的JS资源已成常态，而往往前端应用初始化时根本不需要全量加载逻辑资源，为了首屏渲染速度更快，很多时候都是按需加载，比如懒加载图片等。而这些按需执行逻辑资源都体现在某一个事件回调中去加载。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; Alert.js</span><br><span class="line">export default &#123;</span><br><span class="line">    show() &#123;</span><br><span class="line">        &#x2F;&#x2F; 代码</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 使用 Alert.js 的文件</span><br><span class="line">import(&#39;&#x2F;components&#x2F;Alert.js&#39;)</span><br><span class="line">    .then(Alert &#x3D;&gt; &#123;</span><br><span class="line">        Alert.show()</span><br><span class="line">    &#125;)</span><br></pre></td></tr></table></figure>

<p>考虑到许多应用程序使用诸如 webpack 之类的模块打包器来进行代码的转译和优化，这个特性现在还没什么大作用。</p>
<h3 id="5-8-全局对象globalThis"><a href="#5-8-全局对象globalThis" class="headerlink" title="5.8  全局对象globalThis"></a>5.8  全局对象globalThis</h3><p>Javascript 在不同的环境获取全局对象有不通的方式，node 中通过 global, web中通过 window, self 等，有些甚至通过 this 获取，但通过 this 是及其危险的，this 在 js 中异常复杂，它严重依赖当前的执行上下文，这些无疑增加了获取全局对象的复杂性。</p>
<p>过去获取全局对象，可通过一个全局函数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">var getGlobal &#x3D; function () &#123; </span><br><span class="line">    if (typeof self !&#x3D;&#x3D; &#39;undefined&#39;) &#123; return self; &#125; </span><br><span class="line">    if (typeof window !&#x3D;&#x3D; &#39;undefined&#39;) &#123; return window; &#125; </span><br><span class="line">    if (typeof global !&#x3D;&#x3D; &#39;undefined&#39;) &#123; return global; &#125; </span><br><span class="line">    throw new Error(&#39;unable to locate global object&#39;); </span><br><span class="line">&#125;; </span><br><span class="line"></span><br><span class="line">var globals &#x3D; getGlobal(); </span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; https:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;globalThis</span><br></pre></td></tr></table></figure>

<p>而 globalThis 目的就是提供一种标准化方式访问全局对象，有了 globalThis 后，你可以在任意上下文，任意时刻都能获取到全局对象。</p>

    </div>

    
    
    
      
<div>
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
</div>
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/javascript/" rel="tag"><i class="fa fa-tag"></i> javascript</a>
              <a href="/tags/ES7/" rel="tag"><i class="fa fa-tag"></i> ES7</a>
              <a href="/tags/ES8/" rel="tag"><i class="fa fa-tag"></i> ES8</a>
              <a href="/tags/ES9/" rel="tag"><i class="fa fa-tag"></i> ES9</a>
              <a href="/tags/ES10/" rel="tag"><i class="fa fa-tag"></i> ES10</a>
              <a href="/tags/ES11/" rel="tag"><i class="fa fa-tag"></i> ES11</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2021/03/27/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98/" rel="prev" title="操作系统面试题">
      <i class="fa fa-chevron-left"></i> 操作系统面试题
    </a></div>
      <div class="post-nav-item">
    <a href="/2021/03/29/ES2021(ES12)%E6%96%B0%E5%8A%9F%E8%83%BD/" rel="next" title="ES2021(ES12)">
      ES2021(ES12) <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-ES7%EF%BC%88ES2016%EF%BC%89"><span class="nav-text">1.ES7（ES2016）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-1-Array-prototype-includes-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">1.1 Array.prototype.includes() 重点关注</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-2-%E6%8C%87%E6%95%B0%E6%93%8D%E4%BD%9C%E7%AC%A6-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">1.2 指数操作符 重点关注</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-ES8%EF%BC%88ES2017%EF%BC%89"><span class="nav-text">2. ES8（ES2017）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-async-await-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">2.1 async&#x2F;await 重点关注</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-Object-values-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">2.2 Object.values() 重点关注</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-Object-entries-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">2.3 Object.entries() 重点关注</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-4-String-padding"><span class="nav-text">2.4 String padding</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-5-%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E5%88%97%E8%A1%A8%E7%BB%93%E5%B0%BE%E5%85%81%E8%AE%B8%E9%80%97%E5%8F%B7"><span class="nav-text">2.5 函数参数列表结尾允许逗号</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-6-Object-getOwnPropertyDescriptors"><span class="nav-text">2.6 Object.getOwnPropertyDescriptors()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-7-SharedArrayBuffer%E5%AF%B9%E8%B1%A1"><span class="nav-text">2.7 SharedArrayBuffer对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-8-Atomics%E5%AF%B9%E8%B1%A1"><span class="nav-text">2.8 Atomics对象</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-ES9%EF%BC%88ES2018%EF%BC%89"><span class="nav-text">3. ES9（ES2018）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-%E5%BC%82%E6%AD%A5%E8%BF%AD%E4%BB%A3"><span class="nav-text">3.1 异步迭代</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-Promise-finally-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">3.2 Promise.finally()  重点关注</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-Rest-Spread-%E5%B1%9E%E6%80%A7-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">3.3 Rest&#x2F;Spread 属性 重点关注</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-4-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%91%BD%E5%90%8D%E6%8D%95%E8%8E%B7%E7%BB%84"><span class="nav-text">3.4 正则表达式命名捕获组</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-5-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%8F%8D%E5%90%91%E6%96%AD%E8%A8%80"><span class="nav-text">3.5 正则表达式反向断言</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-6-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8FdotAll%E6%A8%A1%E5%BC%8F"><span class="nav-text">3.6 正则表达式dotAll模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-7-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F-Unicode-%E8%BD%AC%E4%B9%89"><span class="nav-text">3.7 正则表达式 Unicode 转义</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-8-%E9%9D%9E%E8%BD%AC%E4%B9%89%E5%BA%8F%E5%88%97%E7%9A%84%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="nav-text">3.8 非转义序列的模板字符串</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-ES10%EF%BC%88ES2019%EF%BC%89"><span class="nav-text">4.ES10（ES2019）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#4-1-%E8%A1%8C%E5%88%86%E9%9A%94%E7%AC%A6%EF%BC%88U-2028%EF%BC%89%E5%92%8C%E6%AE%B5%E5%88%86%E9%9A%94%E7%AC%A6%EF%BC%88U-2029%EF%BC%89%E7%AC%A6%E5%8F%B7"><span class="nav-text">4.1 行分隔符（U + 2028）和段分隔符（U + 2029）符号</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-2-%E6%9B%B4%E5%8A%A0%E5%8F%8B%E5%A5%BD%E7%9A%84-JSON-stringify"><span class="nav-text">4.2 更加友好的 JSON.stringify</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-3-%E6%96%B0%E5%A2%9E%E4%BA%86Array%E7%9A%84flat-%E6%96%B9%E6%B3%95%E5%92%8CflatMap-%E6%96%B9%E6%B3%95-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">4.3 新增了Array的flat()方法和flatMap()方法 重点关注</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Array-prototype-flat"><span class="nav-text">Array.prototype.flat()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Array-prototype-flatMap"><span class="nav-text">Array.prototype.flatMap()</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-4-%E6%96%B0%E5%A2%9E%E4%BA%86String%E7%9A%84trimStart-%E6%96%B9%E6%B3%95%E5%92%8CtrimEnd-%E6%96%B9%E6%B3%95"><span class="nav-text">4.4 新增了String的trimStart()方法和trimEnd()方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-5-Object-fromEntries"><span class="nav-text">4.5 Object.fromEntries()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-6-Symbol-prototype-description"><span class="nav-text">4.6 Symbol.prototype.description</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-7-String-prototype-matchAll"><span class="nav-text">4.7 String.prototype.matchAll</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#matchAll%E5%8F%AF%E4%BB%A5%E6%9B%B4%E5%A5%BD%E7%9A%84%E7%94%A8%E4%BA%8E%E5%88%86%E7%BB%84"><span class="nav-text">matchAll可以更好的用于分组</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-8-Function-prototype-toString-%E7%8E%B0%E5%9C%A8%E8%BF%94%E5%9B%9E%E7%B2%BE%E7%A1%AE%E5%AD%97%E7%AC%A6%EF%BC%8C%E5%8C%85%E6%8B%AC%E7%A9%BA%E6%A0%BC%E5%92%8C%E6%B3%A8%E9%87%8A-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">4.8 Function.prototype.toString()现在返回精确字符，包括空格和注释 重点关注</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-9-%E4%BF%AE%E6%94%B9-catch-%E7%BB%91%E5%AE%9A-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">4.9 修改 catch 绑定 重点关注</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-10-%E6%96%B0%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8BBigInt-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">4.10 新的基本数据类型BigInt 重点关注</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-ES11%EF%BC%88ES2020%EF%BC%89"><span class="nav-text">5.ES11（ES2020）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#5-1-%E5%8F%AF%E9%80%89%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8-Optional-Chaining"><span class="nav-text">5.1 可选链式调用(Optional Chaining)</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#5-1-1-%E8%AE%BF%E9%97%AE%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="nav-text">5.1.1 访问对象的属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#5-1-2-%E8%AE%BF%E9%97%AE%E6%95%B0%E7%BB%84"><span class="nav-text">5.1.2 访问数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#5-1-3-%E8%B0%83%E7%94%A8%E5%87%BD%E6%95%B0"><span class="nav-text">5.1.3 调用函数</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-2-%E7%A9%BA%E5%80%BC%E5%90%88%E5%B9%B6%EF%BC%88Nullish-Coalescing%EF%BC%89"><span class="nav-text">5.2 空值合并（Nullish Coalescing）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-3-%E7%A7%81%E6%9C%89%E5%AD%97%E6%AE%B5-Private-Fields"><span class="nav-text">5.3 私有字段(Private Fields)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-4-%E9%9D%99%E6%80%81%E5%AD%97%E6%AE%B5-Static-Fields"><span class="nav-text">5.4 静态字段(Static Fields)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-5-%E9%A1%B6%E7%BA%A7-Await-Top-Level-Await"><span class="nav-text">5.5 顶级 Await(Top Level Await)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-6-Promise-allSettled-%E6%96%B9%E6%B3%95-%E9%87%8D%E7%82%B9%E5%85%B3%E6%B3%A8"><span class="nav-text">5.6 Promise.allSettled 方法 重点关注</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-7-%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5-Dynamic-Import"><span class="nav-text">5.7 按需导入 (Dynamic Import)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-8-%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1globalThis"><span class="nav-text">5.8  全局对象globalThis</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="hxy"
      src="/images/Robben.gif">
  <p class="site-author-name" itemprop="name">hxy</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">80</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">120</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/huxingyi1997" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;huxingyi1997" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:huxingyi1997@zju.edu.cn" title="E-Mail → mailto:huxingyi1997@zju.edu.cn" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-frog"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">hxy</span>
</div>

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共1039.2k字</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : true,
      appId      : 'pQsO3ySbU4VtWN2j1FLA74Ha-gzGzoHsz',
      appKey     : 'QYacMDY2VY7Wazprg1X6FiUv',
      placeholder: "Just go go",
      avatar     : 'mm',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : false,
      lang       : 'zh-cn' || 'zh-cn',
      path       : location.pathname,
      recordIP   : false,
      serverURLs : ''
    });
  }, window.Valine);
});
</script>

  
  <!-- 动态背景特效 -->
  <!-- 樱花特效 -->
    <script async src="/js/src/sakura.js"></script>
    <script async src="/js/src/fairyDustCursor.js"></script>
</body>
</html>
